<template>
  <div class="my-reservations-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>我的预约记录</span>
          <el-button type="primary" @click="exportReservations">导出预约记录</el-button>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="所有预约" name="all">
          <el-table :data="reservations" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
            <el-table-column prop="roomName" label="会议室" width="180"></el-table-column>
            <el-table-column prop="date" label="预约时间" width="180" sortable></el-table-column>
            <el-table-column prop="endDate" label="结束时间" width="180" sortable></el-table-column>
            <el-table-column prop="reason" label="预约事由"></el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-button
                  v-if="scope.row.status === '待确认'"
                  type="primary"
                  @click="confirmReservation(scope.row)"
                  size="small"
                >确认</el-button>
                <el-button
                  v-if="scope.row.status === '已确认'"
                  type="danger"
                  @click="cancelReservation(scope.row)"
                  size="small"
                >取消</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已取消" name="cancelled">
          <el-table :data="cancelledReservations" style="width: 100%">
            <el-table-column prop="roomName" label="会议室" width="180"></el-table-column>
            <el-table-column prop="date" label="预约时间" width="180"></el-table-column>
            <el-table-column prop="endDate" label="结束时间" width="180"></el-table-column>
            <el-table-column prop="reason" label="预约事由"></el-table-column>
            <el-table-column prop="cancelReason" label="取消原因"></el-table-column>
            <el-table-column prop="cancelTime" label="取消时间" width="180"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 确认预约对话框 -->
    <el-dialog v-model="confirmDialogVisible" title="确认预约" width="30%">
      <div class="dialog-content">
        <p>您确定要确认预约吗？</p>
        <p>会议室: {{ selectedReservation.roomName }}</p>
        <p>预约时间: {{ selectedReservation.date }}</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 取消预约对话框 -->
    <el-dialog v-model="cancelDialogVisible" title="取消预约" width="30%">
      <el-form :model="cancelForm" label-width="100px">
        <el-form-item label="取消原因">
          <el-input v-model="cancelForm.reason" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="handleCancel">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('all')

const reservations = ref([
  {
    id: 1,
    roomName: '会议室A',
    date: '2025-07-05 10:00',
    endDate: '2025-07-05 12:00',
    reason: '团队会议',
    status: '待确认'
  },
  {
    id: 2,
    roomName: '会议室B',
    date: '2025-07-06 14:00',
    endDate: '2025-07-06 16:00',
    reason: '项目讨论',
    status: '已确认'
  }
])

const cancelledReservations = ref([
  {
    id: 3,
    roomName: '会议室C',
    date: '2025-07-04 15:00',
    endDate: '2025-07-04 17:00',
    reason: '客户会议',
    cancelReason: '会议取消',
    cancelTime: '2025-07-03 14:30'
  }
])

const confirmDialogVisible = ref(false)
const cancelDialogVisible = ref(false)
const selectedReservation = ref(null)
const cancelForm = ref({ reason: '' })

const getStatusType = (status) => {
  const statusMap = {
    '待确认': 'warning',
    '已确认': 'success',
    '已取消': 'danger'
  }
  return statusMap[status] || 'info'
}

const exportReservations = () => {
  // 这里可以添加导出逻辑
  ElMessage.success('预约记录已导出')
}

const confirmReservation = (reservation) => {
  selectedReservation.value = reservation
  confirmDialogVisible.value = true
}

const handleConfirm = () => {
  // 这里可以添加确认预约的逻辑
  ElMessage.success('预约已确认')
  confirmDialogVisible.value = false
}

const cancelReservation = (reservation) => {
  selectedReservation.value = reservation
  cancelDialogVisible.value = true
}

const handleCancel = () => {
  // 这里可以添加取消预约的逻辑
  ElMessage.success('预约已取消')
  cancelDialogVisible.value = false
}
</script>

<style scoped>
.my-reservations-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-content {
  text-align: center;
  padding: 20px;
}

.dialog-content p {
  margin: 10px 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
